import React, {Component, PropTypes} from 'react';
import Signals from 'signals';
import {Row, Col} from 'antd';
import styles from './Main.less';
import SearchInputContainer from '../Input/SearchInputContainer';
import CardContainer from '../Card/CardContainer';
import {search} from "../../services/showServer";

class SearchMainContainer extends React.Component {
  constructor(props) {
    super(props);
    //signals事件
    this.inputSignal = new Signals.Signal();
  }

  componentWillMount() {
    this.inputSignal.add(function (data) {
      if (data.value == '') {
        this.refs.card.setState({
          value: '',
          data: [],
        });
      } else {
        search(data.type, data.value).then(function (json) {
          this.refs.card.setState({
            value: data.value,
            data: json,
          });
        }.bind(this));
      }
    }.bind(this))

  }

  componentWillUnmount() {
    this.inputSignal.removeAll();
  }

  render() {
    return (
      <div>
        <Row className={styles.search_center}>
          <Col span={6}></Col>
          <Col span={12}>
            <SearchInputContainer signal={this.inputSignal} ref="input" placeholder="" style={{width: '100%'}}
            />
          </Col>
          <Col span={6}></Col>
        </Row>

        <Row className={styles.search_center}>
          <Col span={6}></Col>
          <Col span={12}>
            {/*<TableResultContainer ref="card"/>*/}
            <CardContainer ref="card"/>
          </Col>
          <Col span={6}></Col>
        </Row>
      </div>
    );
  }
}

export default SearchMainContainer;
